<template>
  <div>
    <note-templates :data="stringData" :list="directory">
      <template #note>
        <div id="note-item1">
          <title-card title="1.字符串类型转换"></title-card>
          <b><p>原始数据类型转 string</p></b>
          <pre-code :code="string" language="JavaScript" />
          <b><p>string 转其他类型</p></b>
          <pre-code :code="toOther" language="JavaScript" />
        </div>
        <div id="note-item2">
          <title-card title="2.字符串分割"></title-card>
          <b><p>split()</p></b>
          <pre-code :code="split" language="JavaScript" />
        </div>
        <div id="note-item3">
          <title-card title="3.获取字符串长度"></title-card>
          <b><p>length属性</p></b>
          <pre-code :code="length" language="JavaScript" />
        </div>
        <div id="note-item4">
          <title-card title="4.查询子字符串"></title-card>
          <b><p>indexOf()</p></b>
          <pre-code :code="indexOf" language="JavaScript" />
          <b><p>lastIndexOf()()</p></b>
          <p><b>lastIndexOf()</b><span>方法返回调用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String" target="_Blank">String()</a>对象的指定值最后一次出现的索引，在一个字符串中的指定位置 `fromIndex`处从后向前搜索。如果没找到这个特定值则返回-1 。</span></p>
          <pre-code :code="lastIndexOf" language="JavaScript" />
        </div>
        <div id="note-item5">
          <title-card title="5.字符串替换"></title-card>
          <b><p>replace()</p></b>
          <p><b>replace()</b><span> 方法返回一个由替换值（`replacement`）替换部分或所有的模式（`pattern`）匹配项后的新字符串。模式可以是一个字符串或者一个<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp"  target="_Blank">正则表达式</a>，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。</span><b>如果pattern是字符串，则仅替换第一个匹配项。</b></p>
          <pre-code :code="replace" language="JavaScript" />
        </div>
        <div id="note-item6">
          <title-card title="6.查找给定位置的字符或其字符编码值"></title-card>
          <b><p>charAt()</p></b>
          <p><b>charAt()</b><span>方法从一个字符串中返回指定的字符。</span></p>
          <pre-code :code="charAt" language="JavaScript" />

          <b><p>charCodeAt()</p></b>
          <p><b>charCodeAt()</b><span>方法返回 `0` 到 `65535` 之间的整数，表示给定索引处的 UTF-16 代码单元。</span></p>
          <pre-code :code="charCodeAt" language="JavaScript" />
        </div>
        <div id="note-item7">
          <title-card title="7.字符串连接"></title-card>
          <b><p>加号 +</p></b>
          <pre-code :code="add" language="JavaScript" />

          <b><p>concat()</p></b>
          <p><b>concat()</b><span> 方法将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回。</span></p>
          <pre-code :code="concat" language="JavaScript" />
        </div>
        <div id="note-item8">
          <title-card title="8.字符串提取"></title-card>
          <b><p>slice()</p></b>
          <p><b>slice()</b><span>方法提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串。</span></p>
          <pre-code :code="slice" language="JavaScript" />
          
          <b><p>substring()</p></b>
          <p><b>substring()</b><span>方法返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。</span></p>
          <pre-code :code="substring" language="JavaScript" />
          
          <b><p>substr()</p></b>
          <p><b>substr()</b><span>方法返回一个字符串中从指定位置开始到指定字符数的字符</span></p>
          <pre-code :code="substr" language="JavaScript" />
        </div>
        <div id="note-item9">
          <title-card title="9.字符串大小写转换"></title-card>
          <b><p>toLowerCase()</p></b>
          <p><b>toLowerCase()</b><span>会将调用该方法的字符串值转为小写形式，并返回</span></p>
          <pre-code :code="toLowerCase" language="JavaScript" />
          
          <b><p>toUpperCase()</p></b>
          <p><b>toUpperCase()</b><span>方法将调用该方法的字符串转为大写形式并返回（如果调用该方法的值不是字符串类型会被强制转换）</span></p>
          <pre-code :code="toUpperCase" language="JavaScript" />
        </div>
        <div id="note-item10">
          <title-card title="10. 字符串匹配"></title-card>
          <b><p>match()</p></b>
          <p><b>match()</b><span>方法检索返回一个字符串匹配正则表达式的结果。</span></p>
          <pre-code :code="match" language="JavaScript" />
          
          <b><p>search()</p></b>
          <p><b>search()</b><span>方法执行正则表达式和<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String" target="_Blank">String</a>对象之间的一个搜索匹配。</span></p>
          <pre-code :code="search" language="JavaScript" />
        </div>
        <div id="note-item11">
          <title-card title="11.字符串比较"></title-card>
          <b><p>localeCompare()</p></b>
          <p><b>localeCompare()</b><span>方法返回一个数字来指示一个参考字符串是否在排序顺序前面或之后或与给定字符串相同。</span></p>
          <pre-code :code="localeCompare" language="JavaScript" />
        </div>
        <div id="note-item12">
          <title-card title="12.补齐字符串的长度"></title-card>
          <b><p>padStart()</p></b>
          <p><b>padStart()</b><span>用于头部补全。该方法有两个参数，其中第一个参数是一个数字，表示字符串补齐之后的长度；第二个参数是用来补全的字符串。</span></p>
          <ul style="margin-left:20px;">
            <li>
              <p>如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串：</p>
              <pre-code :code="padStart1" language="JavaScript" />
            </li>
            <li>
              <p>如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串：</p>
              <pre-code :code="padStart2" language="JavaScript" />
            </li>
            <li>
              <p>如果省略第二个参数，默认使用空格补全长度：</p>
              <pre-code :code="padStart2" language="JavaScript" />
            </li>
            <li>
              <p>padStart()的常见用途是为数值补全指定位数，笔者最近做的一个需求就是将返回的页数补齐为三位，比如第1页就显示为001，就可以使用该方法来操作：</p>
              <pre-code :code="padStart2" language="JavaScript" />
            </li>
          </ul>
          <b><p>padEnd()</p></b>
          <p><b>padEnd()</b><span>用于尾部补全。该方法也是接收两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串：</span></p>
          <pre-code :code="padEnd" language="JavaScript" />
        </div>
        <div id="note-item13">
          <title-card title="13.移除字符串首尾空白符"></title-card>
          <b><p>trimStart()</p></b>
          <p><b>trimStart()</b><span>方法的的行为与`trim()`一致，不过会返回一个</span><b>从原始字符串的开头删除了空白的新字符串</b><span>，不会修改原始字符串：</span></p>
          <pre-code :code="trimStart" language="JavaScript" />
          
          <b><p>trimEnd()</p></b>
          <p><b>trimEnd()</b><span>方法的的行为与`trim()`一致，不过会返回一个</span><b>从原始字符串的结尾删除了空白的新字符串</b><span>，不会修改原始字符串：</span></p>
          <pre-code :code="trimEnd" language="JavaScript" />
        </div>
      </template>
    </note-templates>
  </div>
</template>

<script setup name="String">
import NoteTemplates from '@/components/NoteTemplates/index.vue'
import TitleCard from "@/components/TitleCard/index.vue"
import { postArticleDetail } from '@/api/home.js';
import { onMounted, reactive, ref, toRefs } from 'vue';

const string = ref(`String()
String(123) // "123"
String('abc') // "abc"
String(true) // "true"
String(undefined) // "undefined"
String(null) // "null"`)
const toOther = ref(`//数字
Number('') // 0 

//布尔
Boolean('') // 0`)
const split = ref(`//使用指定的分隔符字符串将一个String对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置

const str = 'The quick brown fox jumps over the lazy dog.';

const words = str.split(' ');
console.log(words[3]);
// expected output: "fox"

const chars = str.split('');
console.log(chars[8]);
// expected output: "k"

const strCopy = str.split();
console.log(strCopy);
// expected output: Array ["The quick brown fox jumps over the lazy dog."]`)
const length = ref(`var myStr = "I,Love,You,Do,you,love,me";
var myStrLength = myStr.length; //25`)
const indexOf = ref(`//返回调用它的 String 对象中第一次出现的指定值的索引，从 fromIndex 处进行搜索。如果未找到该值，则返回 -1

const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';

const searchTerm = 'dog';
const indexOfFirst = paragraph.indexOf(searchTerm);

console.log('The index of the first' + searchTerm + 'from the beginning is' + indexOfFirst);
// expected output: "The index of the first "dog" from the beginning is 40"

console.log('The index of the 2nd' + searchTerm + 'is' + paragraph.indexOf(searchTerm, (indexOfFirst + 1)));
// expected output: "The index of the 2nd "dog" is 52"`)
const lastIndexOf = ref(`//字符串中的字符被从左向右索引。首字符的索引（index）是 0，最后一个字符的索引是 stringName.length - 1。

'canal'.lastIndexOf('a');     // returns 3 （没有指明fromIndex则从末尾l处开始反向检索到的第一个a出现在l的后面，即index为3的位置）
'canal'.lastIndexOf('a', 2);  // returns 1（指明fromIndex为2则从n处反向向回检索到其后面就是a，即index为1的位置）
'canal'.lastIndexOf('a', 0);  // returns -1(指明fromIndex为0则从c处向左回向检索a发现没有，故返回-1)
'canal'.lastIndexOf('x');     // returns -1
'canal'.lastIndexOf('c', -5); // returns 0（指明fromIndex为-5则视同0，从c处向左回向查找发现自己就是，故返回0）
'canal'.lastIndexOf('c', 0);  // returns 0（指明fromIndex为0则从c处向左回向查找c发现自己就是，故返回自己的索引0）
'canal'.lastIndexOf('');      // returns 5
'canal'.lastIndexOf('', 2);   // returns 2`)
const replace = ref(`//提取字符串中的数字
var s ="价格4500元，等级：2";
console.log(s.replace(/[^0-9]/ig,""));
//45002

const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';

console.log(p.replace('dog', 'monkey'));
// expected output: "The quick brown fox jumps over the lazy monkey. If the dog reacted, was it really lazy?"


const regex = /Dog/i;
console.log(p.replace(regex, 'ferret'));
// expected output: "The quick brown fox jumps over the lazy ferret. If the dog reacted, was it really lazy?"`)
const charAt = ref(`var anyString = "Brave new world";

console.log("The character at index 0   is '" + anyString.charAt(0)   + "'");
console.log("The character at index 1   is '" + anyString.charAt(1)   + "'");
console.log("The character at index 2   is '" + anyString.charAt(2)   + "'");
console.log("The character at index 3   is '" + anyString.charAt(3)   + "'");
console.log("The character at index 4   is '" + anyString.charAt(4)   + "'");
console.log("The character at index 999 is '" + anyString.charAt(999) + "'");

//上面代码的输出为：
The character at index 0 is 'B'
The character at index 1 is 'r'
The character at index 2 is 'a'
The character at index 3 is 'v'
The character at index 4 is 'e'
The character at index 999 is ''`)
const charCodeAt = ref(`const sentence = 'The quick brown fox jumps over the lazy dog.';

const index = 4;

console.log('The character code' +sentence.charCodeAt(index) + 'is equal to' + sentence.charAt(index));
// expected output: "The character code 113 is equal to q"`)
const add = ref(`var str1 = "I,love,you!";
var str2 = "Do,you,love,me?";
var str = str1 + str2 + "Yes!";//"I,love,you!Do,you,love,me?Yes!"`)
const concat = ref(`let hello = 'Hello, '
console.log(hello.concat('Kevin', '. Have a nice day.'))
// Hello, Kevin. Have a nice day.

let greetList = ['Hello', ' ', 'Venkat', '!']
"".concat(...greetList)  // "Hello Venkat!"

"".concat({})    // [object Object]
"".concat([])    // ""
"".concat(null)  // "null"
"".concat(true)  // "true"
"".concat(4, 5)  // "45"`)
const slice = ref(`const str = 'The quick brown fox jumps over the lazy dog.';

console.log(str.slice(31));
// expected output: "the lazy dog."

console.log(str.slice(4, 19));
// expected output: "quick brown fox"

console.log(str.slice(-4));
// expected output: "dog."

console.log(str.slice(-9, -5));
// expected output: "lazy"`)
const substring = ref(`var anyString = "Mozilla";

// 输出 "Moz"
console.log(anyString.substring(0,3));
console.log(anyString.substring(3,0));
console.log(anyString.substring(3,-3));
console.log(anyString.substring(3,NaN));
console.log(anyString.substring(-2,3));
console.log(anyString.substring(NaN,3));

// 输出 "lla"
console.log(anyString.substring(4,7));
console.log(anyString.substring(7,4));

// 输出 ""
console.log(anyString.substring(4,4));

// 输出 "Mozill"
console.log(anyString.substring(0,6));

// 输出 "Mozilla"
console.log(anyString.substring(0,7));
console.log(anyString.substring(0,10));`)
const substr = ref(`var str = "abcdefghij";

console.log("(1,2): "    + str.substr(1,2));   // (1,2): bc
console.log("(-3,2): "   + str.substr(-3,2));  // (-3,2): hi
console.log("(-3): "     + str.substr(-3));    // (-3): hij
console.log("(1): "      + str.substr(1));     // (1): bcdefghij
console.log("(-20, 2): " + str.substr(-20,2)); // (-20, 2): ab
console.log("(20, 2): "  + str.substr(20,2));  // (20, 2):`)
const toLowerCase = ref(`console.log('中文简体 zh-CN || zh-Hans'.toLowerCase());
// 中文简体 zh-cn || zh-hans

console.log( "ALPHABET".toLowerCase() );
// "alphabet"`)
const toUpperCase = ref(`const sentence = 'The quick brown fox jumps over the lazy dog.';

console.log(sentence.toUpperCase());
// expected output: "THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG."`)
const match = ref(`const paragraph = 'The quick brown fox jumps over the lazy dog. It barked.';
const regex = /[A-Z]/g;
const found = paragraph.match(regex);

console.log(found);
// expected output: Array ["T", "I"]

var myStr = "I,love,you,Do,you,love,me";
var pattern = /love/;
var result = myStr.match(pattern);//["love"]
console.log(result .index);//2
console.log(result.input );//I,love,you,Do,you,love,me`)
const search = ref(`const paragraph = 'The quick brown fox jumps over the lazy dog. If the dog barked, was it really lazy?';

// any character that is not a word character or whitespace
const regex = /[^\w\s]/g;

console.log(paragraph.search(regex));
// expected output: 43

console.log(paragraph[paragraph.search(regex)]);
// expected output: "."

var myStr = "I,love,you,Do,you,love,me";
var pattern = /love/;
var result = myStr.search(pattern);//2`)
const localeCompare = ref(`// The letter "a" is before "c" yielding a negative value
'a'.localeCompare('c');
// -1

// Alphabetically the word "check" comes after "against" yielding a positive value
'check'.localeCompare('against');
// 1

// "a" and "a" are equivalent yielding a neutral value of zero
'a'.localeCompare('a');
// 0

var myStr = "chicken";
var myStrTwo = "egg";
var first = myStr.localeCompare(myStrTwo); // -1
first = myStr.localeCompare("chicken"); // 0
first = myStr.localeCompare("apple"); // 1`)
const padStart1 = ref(`'x'.padStart(1, 'ab') // 'x'`)
const padStart2 = ref(`'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'`)
const padStart3 = ref(`'x'.padStart(4, 'ab') // 'a   '`)
const padStart4 = ref(`"1".padStart(3, '0')   // 输出结果： '001'
"15".padStart(3, '0')  // 输出结果： '015`)
const padEnd = ref(`'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'`)
const trimStart = ref(`const s = '  abc  ';
s.trimStart()   // "abc  "`)
const trimEnd = ref(`const s = '  abc  ';
s.trimEnd()   // "  abc"`)

const directory = ref([
  { 
    name:'1.字符串类型转换',
    id: 'note-item1'
  },
  { 
    name:'2.字符串分割',
    id: 'note-item2'
  },
  { 
    name:'3.获取字符串长度',
    id: 'note-item3'
  },
  { 
    name:'4.查询子字符串',
    id: 'note-item4'
  },
  { 
    name:'5.字符串替换',
    id: 'note-item5'
  },
  { 
    name:'6.查找给定位置的字符或其字符编码值',
    id: 'note-item6'
  },
  { 
    name:'7.字符串连接',
    id: 'note-item7'
  },
  { 
    name:'8.字符串提取',
    id: 'note-item8'
  },
  { 
    name:'9.字符串大小写转换',
    id: 'note-item9'
  },
  { 
    name:'10. 字符串匹配',
    id: 'note-item10'
  },
  { 
    name:'11.字符串比较',
    id: 'note-item11'
  },
  {
    name:'12.补齐字符串的长度',
    id: 'note-item12'
  },
  {
    name:'13.移除字符串首尾空白符',
    id: 'note-item13'
  }
])
const data = reactive({
  stringData: {},
});
const { stringData } = toRefs(data);
const getTitle = () => {
  postArticleDetail({
    route: 'String',
  }).then((res) => {
    stringData.value = res.data;
  });
};
onMounted(()=>{
  getTitle();
})
</script>

<style lang="scss" scoped>

</style>